﻿<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
    <script src="../../jsrender.js" type="text/javascript"></script>
    <script src="../../jquery.observable.js" type="text/javascript"></script>
    <script src="../../jquery.views.js" type="text/javascript"></script>
    <link href="../resources/demos.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        table
        {
            cursor: pointer;
            border-collapse: collapse;
            border: 2px solid blue;
            width: 300px;
            margin: 8px;
        }
        table tr
        {
            border: 1px solid blue;
            color: blue;
            background-color: #f8f8f8;
        }
        table td
        {
            padding: 3px;
        }
        table tr:hover
        {
            color: red;
        }
        .movieDetail
        {
            background-color: yellow;
        }
        .movieDetail.row1
        {
            border-bottom: none;
        }
        .movieDetail.row2
        {
            border-top: none;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="../demos.html">JsViews Demos</a></div>
    <h3>
        Accordion: Using dynamic switching of templates</h3>
    <script id="summaryTemplate" type="text/x-jsrender">
	<tr class='movieSummary'><td>
		{{:title}}
	</td></tr>
</script>
    <script id="detailTemplate" type="text/x-jsrender">
	<tr class='movieDetail row1'><td>
		{{:title}}
	</td></tr>
	<tr class='movieDetail row2'><td><b>Languages:</b>
		{{for languages}}
			<div>
				<em>11{{:name}}</em>
			</div>
		{{/for}}
	</td></tr>
</script>
    Click for details:
    <div class="height">
        <table>
            <tbody id="movieList">
            </tbody>
        </table>
    </div>
    <script type="text/javascript">

        var selectedSubView = null,

		movies = [
			{
			    title: "The Red Violin",
			    languages: [
					{ name: "English" },
					{ name: "French" }, { name: "Chinese" }
				]
			},
			{
			    title: "Eyes Wide Shut",
			    languages: [
					{ name: "French" },
					{ name: "German" },
					{ name: "Spanish" }
				]
			},
			{
			    title: "The Inheritance",
			    releaseYear: "1976",
			    languages: [
					{ name: "English" },
					{ name: "Dutch" }
				]
			}
		];

        $.templates({
            detailTemplate: "#detailTemplate",
            summaryTemplate: "#summaryTemplate"
        });

        function unselect() {
            /* Switch template of the selected view back to the summary template */
            if (selectedSubView) {
                selectedSubView.tmpl = "summaryTemplate";
                selectedSubView.refresh();
                selectedSubView = null;
            }
        }

        /* Render the movies array as data-linked content under the movieList <ul>, using the summaryTemplate */
        $.link.summaryTemplate(movies, "#movieList")

        /* onclick handler for movie subviews when not selected */
		.on("click", ".movieSummary", function () {
		    /* Unselect the currently selected view */
		    unselect();

		    /* Get the view which this clicked element
		    belongs to, and make it the selected view */
		    selectedSubView = $.view(this);

		    /* Switch the template on this view to the detail template */
		    selectedSubView.tmpl = "detailTemplate";
		    selectedSubView.refresh();
		})

        /* onclick handler for movie subviews when selected */
		.on("click", ".movieDetail", function () {
		    /* Unselect the currently selected view */
		    unselect();
		});


</script>
</body>
</html>
